<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap3水晶玻璃按钮特效 - PomeloCloud</title>
  <link rel="icon" href="https://file.uzykj.com/favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="./public/css/crystal-glass.css">
</head>
<body>
<header class="navbar">
  <div class="container">
        <span>
            <a href="https://pomelo.work">PomeloCloud</a>
        </span>
    <ul>
      <li><a href="https://pomelo.work/BootstrapExtend/index.html" target="_blank">主题特效</a></li>
      <li><a href="https://pomelo.work/BootstrapExtend/css-checkbox-radios.html">纯原CSS</a></li>
      <li><a href="https://pomelo.work/BootstrapExtend/power-button-group.html">开关组</a></li>
      <li><a href="https://pomelo.work/NiceButton/index.html">响应式</a></li>
      <li><a href="https://pomelo.work/NiceButton/crystal-glass.html">水晶玻璃</a></li>
      <li><a href="https://pomelo.work/NiceButton/newbutton.html">新型按钮</a></li>
    </ul>
  </div>
</header>
<div class="container">
  <div class="row">
    <div class="col-lg-12 col-md-12 text-center">
      <h1>Bootstrap3水晶玻璃按钮特效</h1>
    </div>
  </div>
</div>
<section>
  <table class="table table-bordered table-condensed">
    <thead>
    <tr>
      <th rowspan="2">&nbsp;</th>
      <th colspan="3" class="text-center">default</th>
      <th colspan="3" class="text-center">primary</th>
      <th colspan="3" class="text-center">info</th>
      <th colspan="3" class="text-center">success</th>
      <th colspan="3" class="text-center">warning</th>
      <th colspan="3" class="text-center">danger</th>
      <th colspan="3" class="text-center">link</th>
    </tr>
    <tr>
      <th class="text-center">normal</th>
      <th class="text-center">disabled</th>
      <th class="text-center">active</th>
      <th class="text-center">normal</th>
      <th class="text-center">disabled</th>
      <th class="text-center">active</th>
      <th class="text-center">normal</th>
      <th class="text-center">disabled</th>
      <th class="text-center">active</th>
      <th class="text-center">normal</th>
      <th class="text-center">disabled</th>
      <th class="text-center">active</th>
      <th class="text-center">normal</th>
      <th class="text-center">disabled</th>
      <th class="text-center">active</th>
      <th class="text-center">normal</th>
      <th class="text-center">disabled</th>
      <th class="text-center">active</th>
      <th class="text-center">normal</th>
      <th class="text-center">disabled</th>
      <th class="text-center">active</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">xs / round</th>
      <td>
        <button class="btn btn-default btn-xs btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-default btn-xs btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-default btn-xs btn-round">C</btn>
      </td>
      <td>
        <button class="btn btn-primary btn-xs btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-primary btn-xs btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-primary btn-xs btn-round">C</btn>
      </td>
      <td>
        <button class="btn btn-info btn-xs btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-info btn-xs btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-info btn-xs btn-round">C</btn>
      </td>
      <td>
        <button class="btn btn-success btn-xs btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-success btn-xs btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-success btn-xs btn-round">C</btn>
      </td>
      <td>
        <button class="btn btn-warning btn-xs btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-warning btn-xs btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-warning btn-xs btn-round">C</btn>
      </td>
      <td>
        <button class="btn btn-danger btn-xs btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-danger btn-xs btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-danger btn-xs btn-round">C</btn>
      </td>
      <td>
        <button class="btn btn-link btn-xs btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-link btn-xs btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-link btn-xs btn-round">C</btn>
      </td>
    </tr>
    <tr>
      <th scope="row">xs / square</th>
      <td>
        <button class="btn btn-default btn-xs btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-default btn-xs btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-default btn-xs btn-square">C</btn>
      </td>
      <td>
        <button class="btn btn-primary btn-xs btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-primary btn-xs btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-primary btn-xs btn-square">C</btn>
      </td>
      <td>
        <button class="btn btn-info btn-xs btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-info btn-xs btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-info btn-xs btn-square">C</btn>
      </td>
      <td>
        <button class="btn btn-success btn-xs btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-success btn-xs btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-success btn-xs btn-square">C</btn>
      </td>
      <td>
        <button class="btn btn-warning btn-xs btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-warning btn-xs btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-warning btn-xs btn-square">C</btn>
      </td>
      <td>
        <button class="btn btn-danger btn-xs btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-danger btn-xs btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-danger btn-xs btn-square">C</btn>
      </td>
      <td>
        <button class="btn btn-link btn-xs btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-link btn-xs btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-link btn-xs btn-square">C</btn>
      </td>
    </tr>
    <tr>
      <th scope="row">sm / round</th>
      <td>
        <button class="btn btn-default btn-sm btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-default btn-sm btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-default btn-sm btn-round">C</btn>
      </td>
      <td>
        <button class="btn btn-primary btn-sm btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-primary btn-sm btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-primary btn-sm btn-round">C</btn>
      </td>
      <td>
        <button class="btn btn-info btn-sm btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-info btn-sm btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-info btn-sm btn-round">C</btn>
      </td>
      <td>
        <button class="btn btn-success btn-sm btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-success btn-sm btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-success btn-sm btn-round">C</btn>
      </td>
      <td>
        <button class="btn btn-warning btn-sm btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-warning btn-sm btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-warning btn-sm btn-round">C</btn>
      </td>
      <td>
        <button class="btn btn-danger btn-sm btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-danger btn-sm btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-danger btn-sm btn-round">C</btn>
      </td>
      <td>
        <button class="btn btn-link btn-sm btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-link btn-sm btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-link btn-sm btn-round">C</btn>
      </td>
    </tr>
    <tr>
      <th scope="row">sm / square</th>
      <td>
        <button class="btn btn-default btn-sm btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-default btn-sm btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-default btn-sm btn-square">C</btn>
      </td>
      <td>
        <button class="btn btn-primary btn-sm btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-primary btn-sm btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-primary btn-sm btn-square">C</btn>
      </td>
      <td>
        <button class="btn btn-info btn-sm btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-info btn-sm btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-info btn-sm btn-square">C</btn>
      </td>
      <td>
        <button class="btn btn-success btn-sm btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-success btn-sm btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-success btn-sm btn-square">C</btn>
      </td>
      <td>
        <button class="btn btn-warning btn-sm btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-warning btn-sm btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-warning btn-sm btn-square">C</btn>
      </td>
      <td>
        <button class="btn btn-danger btn-sm btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-danger btn-sm btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-danger btn-sm btn-square">C</btn>
      </td>
      <td>
        <button class="btn btn-link btn-sm btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-link btn-sm btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-link btn-sm btn-square">C</btn>
      </td>
    </tr>
    <tr>
      <th scope="row">md / round</th>
      <td>
        <button class="btn btn-default btn-md btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-default btn-md btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-default btn-md btn-round">C</btn>
      </td>
      <td>
        <button class="btn btn-primary btn-md btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-primary btn-md btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-primary btn-md btn-round">C</btn>
      </td>
      <td>
        <button class="btn btn-info btn-md btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-info btn-md btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-info btn-md btn-round">C</btn>
      </td>
      <td>
        <button class="btn btn-success btn-md btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-success btn-md btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-success btn-md btn-round">C</btn>
      </td>
      <td>
        <button class="btn btn-warning btn-md btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-warning btn-md btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-warning btn-md btn-round">C</btn>
      </td>
      <td>
        <button class="btn btn-danger btn-md btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-danger btn-md btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-danger btn-md btn-round">C</btn>
      </td>
      <td>
        <button class="btn btn-link btn-md btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-link btn-md btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-link btn-md btn-round">C</btn>
      </td>
    </tr>
    <tr>
      <th scope="row">md / square</th>
      <td>
        <button class="btn btn-default btn-md btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-default btn-md btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-default btn-md btn-square">C</btn>
      </td>
      <td>
        <button class="btn btn-primary btn-md btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-primary btn-md btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-primary btn-md btn-square">C</btn>
      </td>
      <td>
        <button class="btn btn-info btn-md btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-info btn-md btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-info btn-md btn-square">C</btn>
      </td>
      <td>
        <button class="btn btn-success btn-md btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-success btn-md btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-success btn-md btn-square">C</btn>
      </td>
      <td>
        <button class="btn btn-warning btn-md btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-warning btn-md btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-warning btn-md btn-square">C</btn>
      </td>
      <td>
        <button class="btn btn-danger btn-md btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-danger btn-md btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-danger btn-md btn-square">C</btn>
      </td>
      <td>
        <button class="btn btn-link btn-md btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-link btn-md btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-link btn-md btn-square">C</btn>
      </td>
    </tr>
    <tr>
      <th scope="row">lg / round</th>
      <td>
        <button class="btn btn-default btn-lg btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-default btn-lg btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-default btn-lg btn-round">C</btn>
      </td>
      <td>
        <button class="btn btn-primary btn-lg btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-primary btn-lg btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-primary btn-lg btn-round">C</btn>
      </td>
      <td>
        <button class="btn btn-info btn-lg btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-info btn-lg btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-info btn-lg btn-round">C</btn>
      </td>
      <td>
        <button class="btn btn-success btn-lg btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-success btn-lg btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-success btn-lg btn-round">C</btn>
      </td>
      <td>
        <button class="btn btn-warning btn-lg btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-warning btn-lg btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-warning btn-lg btn-round">C</btn>
      </td>
      <td>
        <button class="btn btn-danger btn-lg btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-danger btn-lg btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-danger btn-lg btn-round">C</btn>
      </td>
      <td>
        <button class="btn btn-link btn-lg btn-round">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-link btn-lg btn-round">B</btn>
      </td>
      <td>
        <btn class="active btn btn-link btn-lg btn-round">C</btn>
      </td>
    </tr>
    <tr>
      <th scope="row">lg / square</th>
      <td>
        <button class="btn btn-default btn-lg btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-default btn-lg btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-default btn-lg btn-square">C</btn>
      </td>
      <td>
        <button class="btn btn-primary btn-lg btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-primary btn-lg btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-primary btn-lg btn-square">C</btn>
      </td>
      <td>
        <button class="btn btn-info btn-lg btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-info btn-lg btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-info btn-lg btn-square">C</btn>
      </td>
      <td>
        <button class="btn btn-success btn-lg btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-success btn-lg btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-success btn-lg btn-square">C</btn>
      </td>
      <td>
        <button class="btn btn-warning btn-lg btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-warning btn-lg btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-warning btn-lg btn-square">C</btn>
      </td>
      <td>
        <button class="btn btn-danger btn-lg btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-danger btn-lg btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-danger btn-lg btn-square">C</btn>
      </td>
      <td>
        <button class="btn btn-link btn-lg btn-square">A</button>
      </td>
      <td>
        <btn disabled="disabled" class="btn btn-link btn-lg btn-square">B</btn>
      </td>
      <td>
        <btn class="active btn btn-link btn-lg btn-square">C</btn>
      </td>
    </tr>
    </tbody>
  </table>
</section>
</body>
</html>
